<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 去除字符的前后空格 -->
        <input type="text" v-model.trim="msg">
        <!-- 转换为数值 -->
        <input type="text" v-model.number="num">
        <!-- lazy 懒得 v-model默认触发事件 由input 变更为 change-->
        <input type="text" v-model.lazy="msg">

        <!-- radio的情况 -->
        <!-- <label for="male"> -->
            <!-- 男：<input id="male" type="radio" name="sex" value="m" v-model="sex"> -->
        <!-- </label> -->
        <!-- <label for="female"> -->
            <!-- 女：<input id="female" type="radio" name="sex"  value="f" v-model="sex"> -->
        <!-- </label> -->
        <!-- <label for="all"> -->
            <!-- 全部：<input id="all" type="radio"  name="sex" value="x" v-model="sex"> -->
        <!-- </label>  -->

        <label v-for="item in radios" :key="item[1]">
            {{item[0]}}:
            <input type="radio" name="sex"  :value="item[1]" v-model="sex">
        </label>


        <!--checkbox情况  -->
        <label v-for="item in hobbies" :key="item[1]">
            {{item[0]}}:
            <input type="checkbox" name="hobby"  :value="item[1]" v-model="hobby">
        </label>


        <!-- select和option的情况 -->
        <!-- <select name="" id="" v-model="number">
            <option :value="num" v-for="num in 6">{{num}}</option>
        </select> -->

         <!-- select标签多选的情况 -->
         <select name="" id="" v-model="number" multiple>
            <option :value="num" v-for="num in 6">{{num}}</option>
        </select>

        
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <script>

        var vm = new Vue({
            el: "#app",
            data: {
                msg: "hello vue",
                num: 0,
                number: 2,
                sex: "",
                radios: [["男","m"],["女","f"],["全部","x"]],
                hobby: [],
                hobbies: [["唱歌","sing"],["跳舞","dance"],["rap","rap"],["篮球","basketball"]]
            },
            watch: {
                msg(val){
                    // 如果我的值去掉空格之后还为空的字符串就返回
                    if(val.trim() === ""){
                        // val === "" 这个跟上面的是不一样的，这个只有为刚开始空才可以触发
                        console.log("yyyyy")
                        return;
                    }
                    console.log(val);
                }
            }
        })
    </script>
</body>
</html>